<template>
  <transition name="slide">
    <view v-if="open" class="side" @click.stop>
      <view class="side-header">
        <text class="side-title" @click="goHome">检验批原始记录系统</text>
        <text class="side-close" @click="$emit('close')">✕</text>
      </view>

      <scroll-view scroll-y class="side-body">
        <!-- 首页 -->
        <view class="group">
          <view class="group-title"> </view>
          <view class="item" @click="nav(ROUTES.home)">首页</view>
        </view>
        <!-- 我的 -->
        <view class="group">
          <view class="group-title">我的</view>
          <view class="item" @click="nav(ROUTES.profile)">个人信息</view>
          <view class="item" @click="nav(ROUTES.myProjects)">我的项目</view>
        </view>

        <!-- 检验批任务 -->
        <view class="group">
          <view class="group-title">检验批任务</view>
          <view class="item" @click="nav(ROUTES.tasks.index)">任务列表</view>
<!--          <view class="item" @click="nav(ROUTES.tasks.todo)">待办任务</view>-->
          <view class="item" @click="nav(ROUTES.reports.index)">报表生成</view>
        </view>

        <!-- 检验批标准 -->
        <view class="group">
          <view class="group-title">检验批标准</view>
          <view class="item" @click="nav(ROUTES.standards)">标准查询</view>
        </view>
      </scroll-view>
    </view>
  </transition>
</template>

<script setup lang="ts">
import { ROUTES } from '@/services/routeMap'

defineProps<{ open: boolean }>()
defineEmits<{ (e:'close'): void }>()

/** tabBar 路由（请与 pages.json 保持一致） */
const TABBAR_SET = new Set<string>([
  '/pages/home/index',
  '/pages/mine/index',
])

function goHome() {
  nav(ROUTES.home)
}

function nav(url: string) {
  // 关闭侧栏
  // @ts-ignore
  uni.$emit && uni.$emit('close-sidebar')
  // 兼容：父组件也监听 close
  // @ts-ignore
  if (typeof __VUE__ !== 'undefined') {}

  // 选用 switchTab 或 navigateTo
  if (TABBAR_SET.has(url)) {
    uni.switchTab({ url })
  } else {
    uni.navigateTo({ url })
  }
}
</script>

<style scoped>
.side {
  position: fixed; left: 0; top: 0; bottom: 0; width: 260px;
  background: #fff; z-index: 1000; box-shadow: 2px 0 12px rgba(0,0,0,.12);
  display: flex; flex-direction: column;
}
.slide-enter-active, .slide-leave-active { transition: transform .2s ease; }
.slide-enter-from, .slide-leave-to { transform: translateX(-100%); }

.side-header {
  height: 48px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; border-bottom: 1px solid #f0f0f0;
}
.side-title { font-weight: 600; }
.side-close { font-size: 18px; padding: 6px; }

.side-body { flex: 1; }
.group { padding: 12px 8px; }
.group-title { font-size: 12px; color: #999; padding: 6px 8px; }
.item {
  padding: 12px 12px; margin: 6px 4px; border-radius: 8px;
  background: #f7f8fa; font-size: 14px;
}
.item:active { background: #eef2ff; }
</style>
